<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>
    <meta charset="UTF-8"/>
    <title>附近大厅</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>

    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>
    <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp"></script>
    <style>
        html, body {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            background-color: #f8f8f8;
        }

        #app {
            display: flex;
            flex-direction: column;
            height: 100%;
            width: 100%;
        }

        .map {
            flex: 85;
            background: #1aad19;
        }

        .hallList {

        }

        .current_hall_info {
            flex: 15;
            margin-top: 3px;
            box-shadow: 0px -2px 1px rgba(51, 51, 51, 0.1);
            display: flex;
            flex-direction: column;

        }

        .current_hall_detail {
            flex: 12;
            display: flex;
            flex-direction: column;
            overflow-y: scroll;
        }

        #hall_list {
            flex-direction: column;
        }

        .hall_item {
            background-color: #e8e8e8;
            margin: 8px 20px 1px;
        }

        .hall_item_title {
            background-color: #f8f8f8;
            color: #1876ce;
            border-bottom: 2px solid #1876ce;
            padding: 2px 10px;
            margin-bottom: 1px;
            font-size: 16px;
        }

        .hall_item_value {
            margin: -1px 10px;
            border-bottom: 1px solid #c0c0c0;
            padding: 5px 0;
            font-size: 14px;
        }

        .hall_item:last-child.hall_item_value {
            border-bottom: 0
        }

    </style>

    <script th:utext="${params}">
    </script>

</head>
<body>
<div id="app">
    <div id="map" v-bind:class="['map',{hidden_div:showList||showDetail}]">

    </div>
    <div id="current_hall_info" v-if="showCurrentHall" v-bind:style="{display:infoDisplay}"
         class="current_hall_info">

        <div style="flex: 9;display: flex;flex-direction: row;padding: 9px;">
            <div style="flex: 5;display: flex;flex-direction: column;margin-bottom: 10px;" onclick="showDetail();">
                <div class="hall_info_name" style="flex: 5;font-size: 16px;font-weight: 700;">{{currentHall.hallName}}
                </div>
                <div style="height: 24px;line-height: 24px;display: flex;flex-direction: row;font-size: 12px;color: #888888;">
                    <div style="padding-right: 12px;border-right:1px solid #AAAAAA;height: 24px;"
                         v-bind:style="{color:currentHall.distanceColor}">{{currentHall.distanceName}}
                    </div>
                    <div style="padding-left: 12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 58vw;height: 24px;">
                        {{currentHall.address }}
                    </div>
                </div>
            </div>
            <div style="flex: 1">
                <div v-on:click="showPathById(currentHall.id);" v-bind:style="{display:showPathDisplay}"
                     style="flex-direction: column;align-items: center;justify-content: center;display: flex;">
                    <img src="/images/icon_navi.png" width="32"/>
                    <span style="font-size: 10px;color: #1876ce;">显示线路</span>
                </div>
                <div onclick="hidePath();" v-bind:style="{display:hidePathDisplay}"
                     style="flex-direction: column;align-items: center;justify-content: center;">
                    <img src="/images/icon_close_navi.png" width="32"/>
                    <span style="font-size: 10px;color: #1876ce;">隐藏线路</span>
                </div>
            </div>
        </div>

        <div onclick="showDetail();"
             style="flex: 3;display: flex;flex-direction: row;justify-content: center;align-items: center;background-color: #f4f4f4;padding: 6px;">
            <img src="/images/icon_detail.png" width="16"/>
            <span style="font-size: 12px;color: #1876ce;">&nbsp;详情</span>
        </div>

    </div>

    <div v-if="showCurrentHall" id="current_hall_detail" v-bind:style="{display:detailDisplay}"
         v-bind:class="['current_hall_detail',{'hidden_div':showList||hideDetail}]">
        <div class="hall_name" style="text-align: center;padding: 15px 0 5px;font-size: 18px;font-weight: 700;">
            {{currentHall.hallName}}
        </div>
        <div class="hall_item">
            <div class="hall_item_title">
                工作时间
            </div>
            <div style="height: 4px"></div>
            <div style="margin: -1px 10px;padding: 1px 0;font-size: 14px;" v-for="wt in currentHall.workingTimeList">
                &nbsp;{{wt}}
            </div>
            <div style="height: 4px"></div>

            <div style="margin-top: -2px;height: 3px;background-color: #e8e8e8;"></div>
        </div>
        <div class="hall_item">
            <div class="hall_item_title">
                联系电话
            </div>
            <div class="hall_item_value">
                <a v-bind:href="'tel:'+currentHall.tel"
                   style="color: #000;display: flex;justify-content: left;align-items: center">
                    <span>{{currentHall.tel}}&nbsp;</span>
                    <img src="/images/icon_tel.png" width="24"/>

                </a>
            </div>
            <div style="margin-top: -2px;height: 3px;background-color: #e8e8e8;"></div>
        </div>
        <div class="hall_item">
            <div class="hall_item_title">
                业务范围
            </div>
            <div class="hall_item_value">
                {{currentHall.serviceName}}
            </div>
            <div style="margin-top: -2px;height: 3px;background-color: #e8e8e8;"></div>
        </div>
        <div class="hall_item">
            <div class="hall_item_title">
                办理热度
            </div>
            <div v-if="currentHall.serviceFlagA" class="hall_item_value">
                公民业务:当前排队<span style="color: #1876ce">{{currentHall.queueCountA}}</span>人
            </div>
            <div v-if="currentHall.serviceFlagB" class="hall_item_value">
                境外业务:当前排队<span style="color: #1876ce">{{currentHall.queueCountB}}</span>人
            </div>
            <div v-if="currentHall.serviceFlagC" class="hall_item_value">
                综合业务:当前排队<span style="color: #1876ce">{{currentHall.queueCountC}}</span>人
            </div>
            <div style="margin-top: -2px;height: 3px;background-color: #e8e8e8;"></div>
        </div>
        <div class="hall_item">
            <div class="hall_item_title">
                大厅地址
            </div>
            <div class="hall_item_value">
                <span>{{currentHall.address}}</span>
            </div>
            <div style="margin-top: -2px;height: 3px;background-color: #e8e8e8;"></div>
        </div>

        <div onclick="hideDetail()" class="weui-btn weui-btn_primary" style="margin: 20px;background-color: #1876ce;">
            返回
        </div>
    </div>


    <div id="hall_list" v-bind:class="['hall_list',{hidden_div:hideList}]" v-bind:style="{display:listDisplay}">
        <div v-for="hall in hallList"
             style="margin: 12px 12px 4px;display: flex;flex-direction: row;border-bottom: 1px solid #d0d0d0;padding: 0 8px 5px;">
            <div v-on:click="showInfoById(hall.id);"
                 style="flex: 5;display: flex;flex-direction: column;margin-bottom: 1px;">
                <div class="hall_info_name" style="flex: 5;font-size: 16px;font-weight: 700;">{{hall.hallName}}
                </div>
                <div style="height: 24px;line-height: 24px;display: flex;flex-direction: row;font-size: 12px;color: #888888;">
                    <div style="padding-right: 12px;border-right:1px solid #AAAAAA;"
                         v-bind:style="{color:hall.distanceColor}">{{hall.distanceName}}
                    </div>
                    <div style="padding-left: 12px;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;width: 58vw;">
                        {{hall.address }}
                    </div>
                </div>
            </div>
            <div style="flex: 1">

                <div v-on:click="showPathById(hall.id);"
                     style="display:flex;flex-direction: column;align-items: center;justify-content: center;">
                    <img src="/images/icon_navi.png" width="32"/>
                    <span style="font-size: 10px;color: #1876ce;">线路</span>
                </div>
            </div>
        </div>
        <div onclick="hideHallList();" class="weui-btn weui-btn_default"
             style="margin: 20px;background-color: #1876ce;"> 返回
        </div>

    </div>


    <div style="display: none">
        <div id="my_position" onclick="backToCenter();"
             style="border: 1px solid #707070;padding: 4px;border-radius: 4px; margin: 10px;height: 20px;width: 20px;background-color: #f8f8f8;">
            <img src="/images/icon_my_position.png" style="width: 20px"/></div>
        <div id="hall_list_btn" onclick="showHallList();"
             style="border: 1px solid #707070;padding: 4px;border-radius: 4px; margin: 10px; height: 20px;width: 20px;background-color: #f8f8f8;">
            <img src="/images/icon_list.png" style="width: 20px"/></div>
    </div>


</div>

<script src="/js/hallMap.js"></script>
</body>
</html>